<template>
    <div class="content">


        <!-- <router-link to="/add_good">go</router-link> -->
        <el-button type="primary" style="width: 120px; height: 30px; margin-left: 6px; margin-top: 8px;"
            @click="clickAdd">添加快递模板</el-button>

        <div>
            <el-table border ref="multipleTable" :data="expressTemplates" tooltip-effect="dark"
                style="width: 100%;margin-top: 20px; margin-left: 6px;" height="">
                <!-- <el-table-column type="selection" width="55" align="center">
                </el-table-column> -->

                <el-table-column label="快递名称" prop="name" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="免运费金额" prop="free_freight_amount" show-overflow-tooltip
                    align="center"></el-table-column>
                <el-table-column label="状态" show-overflow-tooltip align="center">
                    <template slot-scope="scope">
                        {{ scope.row.status == 0 ? "关闭" : "开启" }}
                    </template>
                </el-table-column>
                <el-table-column label="最后更新时间" prop="updated_at" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作员" prop="operator" show-overflow-tooltip align="center"></el-table-column>


                <el-table-column fixed="right" label="编辑" align="center" width="200px">
                    <template slot-scope="scope">
                        <el-button @click="bianJi(scope.row)" type="text" size="mini" style="color: #293B69;">编辑</el-button>
                        <el-button @click="shanChu(scope.row)" type="text" size="mini" style="color: red;">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>

        </div>


        <!-- 审核详情弹出框 -->
        <el-dialog title="添加模板" :visible.sync="addDialogVisible" width="40%">

            <div style="height: 800px; overflow: auto; display: flex; flex-direction: column;  ">
                <div style="display: flex; align-items: center; margin-left: 20px;">
                    <div style="width: 100px; text-align: right; ">*快递名称：</div>
                    <el-input placeholder="请输入快递名称" v-model="expressName"
                        style="width: 320px; margin-left: 30px;"></el-input>
                </div>

                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px; ">
                    <div style="width: 100px; text-align: right;">*免运费金额：</div>
                    <el-input type="number" step="0.01" placeholder="请输入金额" v-model="free_freight_amount"
                        style="width: 320px; margin-left: 30px;"></el-input>
                </div>


                <div style="display: flex; margin-top: 20px; align-items: center; margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*状态：</div>
                    <el-radio-group v-model="expressStatus" style="display: flex; margin-left: 30px;">
                        <el-radio :label="1" class="test-label">开启</el-radio>
                        <el-radio :label="0" class="test-label">关闭</el-radio>
                    </el-radio-group>
                </div>


                <div style="display: flex; margin-top: 20px; align-items: center;  margin-left: 20px;">
                    <div style="width: 100px; text-align: right;">*备注：</div>
                    <el-input v-model="note" placeholder="请输入备注" style="margin-left: 30px; width: 320px;" type="textarea"
                        :autosize="autosize"></el-input>

                </div>


                <el-table border ref="multipleTable" :data="templateAreas" tooltip-effect="dark"
                    style="width: 95% ;margin-top: 20px; margin-left: 6px; margin-right: 20px; margin-bottom: 100px; overflow: auto;">

                    <el-table-column label="序号" show-overflow-tooltip align="center" :key="index">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="地区名" prop="name" show-overflow-tooltip align="center"></el-table-column>
                    <el-table-column label="首重 (kg/元)" show-overaflow-tooltip align="center">
                        <template slot-scope="scope"><el-input v-model="scope.row.firstWeight" type="number"
                                step="0.01"></el-input></template>
                    </el-table-column>
                    <el-table-column label="续重 (kg/元)" show-overflow-tooltip align="center">
                        <template slot-scope="scope"><el-input v-model="scope.row.thenWeight" type="number"
                                step="0.01"></el-input></template>
                    </el-table-column>


                </el-table>



                <div style="position: absolute; bottom: 20px; align-self: center;">
                    <el-button v-if="isAdd" type="primary" @click="confirmExchangeClick">提交</el-button>
                    <el-button v-else type="primary" @click="bianJiExchangeClick">修改</el-button>
                </div>

            </div>
        </el-dialog>


    </div>
</template>

<script>
import { del, get, post, put } from '@/utils/request';
import { url } from "@/utils/url";


export default {
    name: '',
    data() {
        return {
            id: '',
            isAdd: false,
            expressStatus: 1,
            free_freight_amount: '',
            expressName: '',
            note: '',
            //地区地址省
            templateAreas: [
                {
                    number: '1',
                    name: '北京市',
                    firstWeight: 11.11,
                    thenWeight: 1.00

                }
            ],

            addDialogVisible: false,
            expressTemplates: [
                {
                    name: '京东快递',
                    free_freight_amount: 0.00,
                    status: '',
                    upDateTime: '2023-11/28 18:05',
                    operator: '快递员01'

                }
            ],




        }
    },
    components: {

    },
    computed: {

    },
    mounted() {
        this.getTemplates()
    },
    methods: {

        bianJi(row) {

            get(url.template, {
                id: row.id
            }).then(res => {
                console.log('请求成功')
                let data = res.data

                this.expressName = data.name
                this.free_freight_amount = data.free_freight_amount
                this.note = data.note,
                    this.expressStatus = data.status
                this.id = row.id
                this.isAdd = false
                let currentRules = data.rule.map(rule => {
                    return {
                        id: rule.province_id,
                        name: rule.province_name,
                        firstWeight: rule.first_price,
                        thenWeight: rule.renewal_price
                    }
                })
                this.templateAreas = currentRules
                // this.templateAreas.forEach(it=>{
                //     it.firstWeight =1
                // })
                console.log("点击编辑this.templateAreas 的值  ==" + JSON.stringify(this.templateAreas))
                this.addDialogVisible = true

            }).catch(error => {
                console.log('请求失败')
            })
        },

        //提交
        confirmExchangeClick() {

            console.log("选择的地区没有重量的：" + JSON.stringify(this.areasWithoutWeights()))
            let withOutWeightAreas = this.areasWithoutWeights()
            console.log("当前的templateAreas" + JSON.stringify(this.templateAreas))
            if (withOutWeightAreas != null && withOutWeightAreas.length != 0) {
                let withoutName = withOutWeightAreas.map(area => area.name).join(',')
                this.$message({
                    message: '请填写' + withoutName + "的信息",
                    type: 'error',
                    customClass: 'my-message-class' // 自定义类名 
                })
                return
            }

            let rules = this.templateAreas.map(area => {
                return {
                    province_id: area.id,
                    province_name: area.name,
                    first_price: area.firstWeight,
                    renewal_price: area.thenWeight
                }
            })
            console.log('执行请求post')

            post(url.template, {
                name: this.expressName,
                free_freight_amount: this.free_freight_amount,
                note: this.note,
                status: this.expressStatus,
                rule: JSON.stringify(rules)

            }).then(res => {
                console.log('请求成功')
                this.addDialogVisible = false
                this.getTemplates()

            }).catch(error => {
                console.log('请求失败')
            })
        },


        //提交编辑
        bianJiExchangeClick() {

            console.log("选择的地区没有重量的：" + JSON.stringify(this.areasWithoutWeights()))
            let withOutWeightAreas = this.areasWithoutWeights()
            console.log("当前的templateAreas" + JSON.stringify(this.templateAreas))
            if (withOutWeightAreas != null && withOutWeightAreas.length != 0) {
                let withoutName = withOutWeightAreas.map(area => area.name).join(',')
                this.$message({
                    message: '请填写' + withoutName + "的信息",
                    type: 'error',
                    customClass: 'my-message-class' // 自定义类名 
                })
                return
            }

            let rules = this.templateAreas.map(area => {
                return {
                    province_id: area.id,
                    province_name: area.name,
                    first_price: area.firstWeight,
                    renewal_price: area.thenWeight
                }
            })
            console.log('执行请求put')

            put(url.template, {
                id: this.id,
                name: this.expressName,
                free_freight_amount: this.free_freight_amount,
                note: this.note,
                status: this.expressStatus,
                rule: JSON.stringify(rules)

            }).then(res => {
                console.log('请求成功')
                this.addDialogVisible = false
                this.$message(res.msg)
                this.getTemplates()

            }).catch(error => {
                console.log('请求失败')
            })
        },

        //删除模板
        shanChu(row) {
            console.log("???delete执行")

            this.$alert('确定删除'+row.name+"吗", "温馨提示", {
                confirmButtonText: "确定",
                callback: action => {
                    if(action == 'cancel'){
                        console.log('点击取消了')
                        return
                    }
                    console.log('请求删除接口')
                    del(url.template, {
                        id: row.id,

                    }).then(res => {
                        console.log('请求成功')
                        this.addDialogVisible = false
                        this.$message(res.msg)
                        this.getTemplates()

                    }).catch(error => {
                        console.log('请求失败')
                    })
                }
            });

        },

        //筛选出未填写首重续重的省份
        areasWithoutWeights() {
            return this.templateAreas.filter(area => {
                return !Object.prototype.hasOwnProperty.call(area, 'firstWeight') ||
                    !Object.prototype.hasOwnProperty.call(area, 'thenWeight') ||
                    area.firstWeight === '' ||
                    area.thenWeight === '';
            });
        },

        //获取快递模板列表
        getTemplates() {
            get(url.templates, {
                page: 1,
                per_page: 1000
            }).then(res => {
                this.expressTemplates = res.data.data
            }).catch(error => {
                console.error(error);
            })


        },

        getAreaPid0() {
            get(url.areas, {
                pid: 0
            }).then(res => {
                this.templateAreas = res.data
                //清空所有值
                this.expressName = ''
                this.free_freight_amount = ''
                this.expressStatus = 1
                this.note = ''

                this.isAdd = true

                this.addDialogVisible = true
                // const defaultWeight = { firstWeight: 0, thenWeight: 0 };
                // // 使用扩展运算符合并原始对象和默认值  
                // this.templateAreas = this.templateAreas.map(area => ({
                //     ...area,
                //     ...defaultWeight
                // }));

            }).catch(err => {
                console.error(err);
            })


        },

        clickAdd() {
            this.getAreaPid0();
            // this.addDialogVisible = !this.addDialogVisible
        }
    },
}
</script>

<style scoped>
.content {
    overflow: auto;
    background: white;
    flex-direction: column;
    width: 100%;
    border-radius: 5px;
    border: solid 6px #F5F5F5;

}

.my-message-class {
    line-height: 10;
    width: 200px;
}
</style>
